<template>
	<view class="category-main">
		<view class="navigationBar-wrap">
			<view class="status_bar"></view>
			<view class="search-wrap flex-center">
				<view class="search-content" @click="jumpSearchAction">
					<text class="iconfont search-icon">&#xe614;</text>
					<text class="search-text">请输入关键字搜索</text>
				</view>
			</view>
		</view>
		<view class="menu-wrap">
			<scroll-view class="menu-scroll-wrap" scroll-y="true">
				<view class="status_bar"></view>
				<view v-for="(lItem,index) in tabs" :class="['tabs-item',{'active-tab':index==tabIndex}]" @click="clickTabsAction(index)">
					{{lItem}}
				</view>
			</scroll-view>
		</view>
		<view class="content-wrap">
			<mescroll-body ref="mescrollRef" top="46px" :topbar="true" :bottombar="false" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption">
				<image class="category-image" mode="widthFix" src="https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595990578300680522.jpg"></image>
				<view class="goods-list">
					<view v-for="(rItem,rIndex) in dataList" class="goods-item flex-center">
						<view class="goods-content">
							<image class="avatar" src="//img13.360buyimg.com/focus/s140x140_jfs/t13069/193/944900508/2525/d7c9efc/5a17f21dN905aaf4c.jpg" mode=""></image>
							<text class="name">沙发垫套{{rIndex}}</text>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script lang="ts">
    import Vue from 'vue';
	import util from '@/static/js/util';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default Vue.extend({
		mixins: [MescrollMixin],
		data() {
			return {
				systemInfo: {},
				dataList : [],
				downOption: {
					auto: false
				},
				tabs: ['全部', '奶粉', '面膜', '图书', '果汁', '奶瓶', '美素', '花王', '韩蜜', '口红', '毛巾', '玩具', '衣服','食品生鲜','家具家装','家居厨具'], 
				tabIndex: 0
			}
		},
		onLoad(option:any) {
			const _this:any = this
			let query = _this.$route
			// console.log(option,query)
			_this.systemInfo = uni.getSystemInfoSync()
			// console.log(_this.systemInfo)
		},
		methods: {
			upCallback(page:any) {
				const _this: any = this
				
				if(page.num == 1) _this.dataList = []
			
				setTimeout(()=>{
				
					let curPageData = new Array(24).fill(2)
					let curPageLen = curPageData.length
					
					_this.dataList = _this.dataList.concat(curPageData)
					
					console.log('上拉-------',_this.dataList)
					
					_this.mescroll.endByPage(curPageLen, 3); 
					
				},2000)
			},
			clickTabsAction(index:any) {
				const _this:any = this;
				_this.tabIndex = index
				
				_this.mescroll.resetUpScroll();
			},
			jumpSearchAction() {
				util.jumpPage('/pages/search/search')
			}
		}
	});
</script>

<style lang="scss">
	@import "./category.scss";  
</style>
